<template>
    <div style="display:flex">
      <!-- <my-table :items="emps"></my-table>
       <hr>
       <my-table :items="emps">
          <template slot-scope="scope">
              <img :src="scope.item" style="width:50px;height:50px">
          </template>
       </my-table>

        <my-table :items="emps">
          <template slot-scope="scope">
              <img :src="scope.item" style="width:50px;height:50px;border-radius:50%">
          </template>
       </my-table> -->
       <MyList title="Shape" :items="shapes"></MyList>
       <MyList title="Color" :items="colors">
          <template slot-scope="scope">
            <div class="item">
               <div class="bock" :style="`background:${scope.item.hex}`"></div>
               <div>{{scope.item.name}}</div>
            </div>
          </template> 
       </MyList>
    </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
import MyList from '@/components/MyList.vue'
export default {
  components: { MyTable,MyList},
  data(){
    return{
      shapes: [
        { name: "Square", sides: 4 },
        { name: "Hexagon", sides: 6 },
        { name: "Triangle", sides: 3 },
      ],
      colors: [
        { name: "Yellow", hex: "#F4D03F" },
        { name: "Green", hex: "#229954" },
        { name: "Purple", hex: "#9B59B6" },
      ],
      emps:[
        {
          id:'7895',
          name:'Jack',
          salary:7898,
          avatar:'http://old.woniuxy.com/page/image/userIcon/teacherIcon/lixiaolong.jpg'
        },
        {
          id:'7896',
          name:'King',
          salary:6898,
          avatar:'http://old.woniuxy.com/page/image/userIcon/teacherIcon/hanwei.jpg'
        },
        {
          id:'7891',
          name:'Jerry',
          salary:3898,
          avatar:'http://old.woniuxy.com/page/image/userIcon/teacherIcon/zhaijizhe.jpg'
        }
      ]
    }
  }
}
</script>

<style>
  .item{
    display: flex;
  }
  .bock{
    width: 40px;
    height: 20px;
    border: 1px solid #000;
  }
</style>